<template>
  <el-form-item :label="label" :label-width="labelWidth" :prop="props.data.field" required readonly>
    <el-input
      v-model="val"
      :style="{ width: `${props.data.compWidth || 100}%` }"
      readonly
      :disabled="props.data.disabled"
    >
    </el-input>
  </el-form-item>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { ElFormItem, ElInput } from 'element-plus'
import { useProps } from '../../common-props/hooks'
import { useAuthStore } from '@/stores/auth'
import type { FormMode } from '@/typings'

const props = defineProps<{ data: Record<string, any>; form: Record<string, any>; mode: FormMode }>()
const emits = defineEmits(['valueChange'])

const { label, labelWidth } = useProps(props)
const val = ref()

const authStore = useAuthStore()

onMounted(() => {
  if (props.mode === 'approve') {
    val.value = authStore.user?.userName
    emits('valueChange', { name: props.data.field, value: val.value })
    emits('valueChange', { name: `${props.data.field}Id`, value: authStore.user?.userId })
  }
})
</script>

<style lang="scss" scoped></style>
